<template>
    <div class="classMess">
        <div class="newsSectionTitle">
            <div class="classNameText" @click="showDetails">
                {{
                    (gradeDataList[selectGradeIndex] &&
                        gradeDataList[selectGradeIndex].group_name) ||
                        "暂无班级"
                }}
            </div>
            <div class="classSelectBox">
                <el-select
                    v-model="selectGradeIndex"
                    placeholder="切换班级"
                    size="mini"
                    style="width: 100px;"
                    @change="changeGrade"
                >
                    <el-option
                        v-for="(item, index) in gradeDataList"
                        :key="index"
                        :label="item.group_name"
                        :value="index"
                    >
                    </el-option>
                </el-select>
                <div>
                    <el-button
                        size="mini"
                        @click="pushRouter('/class/searchClass')"
                        >加入班级</el-button
                    >
                </div>
            </div>
        </div>
        <div class="classMessBox">
            <div class="MessTimeLine">
                <div class="MessTimeLineTitle">公告</div>
                <div class="messPadBox">
                    <div class="lineContent">
                        <el-timeline>
                            <el-timeline-item
                                v-for="(el, index) in classNoticeLists"
                                :key="index"
                            >
                                <el-card>
                                    <div
                                        class="cardTitle"
                                        @click="seeGongGao(el)"
                                    >
                                        {{ el.notice_title }}：
                                    </div>
                                    <br />
                                    <div class="cardSubTitle">
                                        <span>{{ el.nicheng }}</span>
                                        <span style="margin-left: 10px;"
                                            >发表于 2020-09-10 23:23</span
                                        >
                                        <span style="margin-left: 10px;"
                                            >{{ el.browse_num }}人已读</span
                                        >
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                        <div
                            class="noMoreNotice"
                            v-if="classNoticeLists.length == 0"
                        >
                            -- 暂无公告 --
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="550px"
            custom-class="dialogBox"
            center
            :before-close="handleClose"
        >
            <div class="dialogTitle">
                <div
                    class="dialogTitleItem"
                    :class="{ itemIsSelect: isdialogTitleSelect == '0' }"
                    @click="isdialogTitleSelect = '0'"
                >
                    首页
                </div>
                <div
                    class="dialogTitleItem"
                    :class="{ itemIsSelect: isdialogTitleSelect == '1' }"
                    @click="isdialogTitleSelect = '1'"
                >
                    成员
                </div>
            </div>
            <div class="dialogBody">
                <div v-show="isdialogTitleSelect == '0'">
                    <div class="classInfo">
                        <div>
                            <img :src="classMess.nicheng.avatar" />
                        </div>
                        <div class="classInfoTitle">
                            <div class="classInfoTitleClassName">
                                {{ classMess.group_name }}
                            </div>
                            <div
                                class="classInfoTitleClassTime"
                                style="margin: 5px 0;font-weight: 600;"
                            >
                                班主任：{{ classMess.nicheng.name }}
                            </div>
                            <div class="classInfoTitleClassTime">
                                创建时间：{{ classMess.creat_time }}
                            </div>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div class="classIntroduction">
                        <span class="classIntroductionTitle">班级简介：</span>
                        {{ classMess.group_brief }}
                    </div>
                    <div class="classPeoNum">
                        班级成员 {{ classMess.count_num }} 人
                    </div>
                    <div class="classPeoAvatarBox">
                        <div
                            class="classPeoAvatarItem"
                            v-for="(item, index) in teacherList.concat(
                                studentList
                            )"
                            :key="index"
                        >
                            <div>
                                <el-badge
                                    value="老师"
                                    v-if="item.users_type == 2"
                                >
                                    <el-avatar
                                        size="large"
                                        :src="item.avatar"
                                        fit="fill"
                                    ></el-avatar>
                                </el-badge>
                                <el-avatar
                                    v-else
                                    size="large"
                                    :src="item.avatar"
                                    fit="fill"
                                ></el-avatar>
                                <div class="classPeoAvatarItemName">
                                    {{ item.nicheng }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="isdialogTitleSelect == '1'">
                    <div>
                        <el-select
                            v-model="selectUsersType"
                            placeholder="请选择"
                            size="mini"
                            style="width: 100px;margin-right: 10px;"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                        <el-input
                            placeholder="请输入您要查找的姓名"
                            size="mini"
                            style="width: 200px;margin-right: 10px;"
                            clearable
                            @clear="claerSearch"
                            v-model="searchVaule"
                        ></el-input>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            style="background: #018854;"
                            @click="searchUser"
                            >搜索</el-button
                        >
                    </div>
                    <el-table :data="userTableList" stripe style="width: 100%">
                        <el-table-column label="姓名" width="200">
                            <template slot-scope="scope">
                                {{ scope.row.nicheng
                                }}{{
                                    scope.row.master == 1
                                        ? "(班主任)"
                                        : scope.row.master != 1 &&
                                          scope.row.member_type == 1
                                        ? "(管理员)"
                                        : ""
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="性别">
                            <template slot-scope="scope">
                                {{ scope.row.sex === 1 ? "男" : "女" }}
                            </template>
                        </el-table-column>
                        <el-table-column label="职务">
                            <template slot-scope="scope">
                                <template v-if="scope.row.users_type == 2">
                                    <span v-if="scope.row.member_type === 1"
                                        >{{
                                            scope.row.teach_subject_name
                                        }}老师<span class="color">*</span></span
                                    >
                                    <span v-else
                                        >{{
                                            scope.row.teach_subject_name
                                        }}老师</span
                                    >
                                </template>
                                <template v-if="scope.row.users_type == 1"
                                    >学生</template
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button
                    @click="dialogVisible = false"
                    size="small"
                    round
                    style="border-color: #3980ED; color: #3980ED;cursor: pointer;"
                    >确定</el-button
                > -->
                <el-button
                    size="small"
                    round
                    style="background: #F25427;color: #FFFFFF;cursor: pointer;"
                    @click="outGrade"
                    >退出班级</el-button
                >
            </span>
        </el-dialog>
        <!-- //查看公告 -->
        <el-dialog
            title="公告详情"
            :visible.sync="gongGaoDialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <div class="gongGaotitle">{{ gongGaoDialog.notice_title }}</div>

            <div class="gongGaoSub">
                <span>发布人：{{ gongGaoDialog.nicheng }}</span>
            </div>
            <div class="gongGaoSub2">
                <span>{{ gongGaoDialog.browse_num }}人已读</span>
                <span style="margin-right:10px">发表于 2020-09-10 23:23</span>
            </div>
            <el-divider></el-divider>
            <div
                style="margin-top:10px"
                v-html="HTMLDecode(gongGaoDialog.notice_text)"
            ></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="gongGaoDialogVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getGradeList,
    getGradeMemberList,
    toGradeOut,
    getNoticeLists,
    saveBrowseNum
} from "@/api/class";
import { getFormatTime } from "@/utils/timeUtils";

export default {
    data() {
        return {
            options: [
                {
                    value: 2,
                    label: "老师"
                },
                {
                    value: 1,
                    label: "学生"
                }
            ],
            searchVaule: "", //搜索成员
            userTableList: [], //成员列表
            selectUsersType: 2, //成员筛选
            dialogVisible: false, //班级弹窗
            isdialogTitleSelect: "0",
            gradeDataList: [], //班级列表
            selectGradeIndex: "", //选择班级
            classMess: {
                group_name: "",
                nicheng: {
                    name: "",
                    avatar: ""
                },
                count_num: "",
                creat_time: "",
                group_brief: "暂无简介"
            }, //班级详情
            teacherList: [], //教师列表
            studentList: [], //学生列表
            classNoticeLists: [], //班级公告列表
            gongGaoDialogVisible: false, //公告
            gongGaoDialog: {} //公告显示
        };
    },
    created() {
        this.get_grade_list();
    },
    watch: {
        selectUsersType(value) {
            if (value == 1) {
                this.userTableList = this.studentList;
            } else {
                this.userTableList = this.teacherList;
            }
        }
    },
    methods: {
        pushRouter(url) {
            this.$router.push(url);
        },
        handleClose(done) {
            done();
        },
        claerSearch() {
            if (this.selectUsersType == 1) {
                this.userTableList = this.studentList;
            } else {
                this.userTableList = this.teacherList;
            }
        },
        searchUser() {
            if (this.searchVaule == "") return;
            this.userTableList = this.userTableList.filter(item => {
                return item.nicheng.indexOf(this.searchVaule) > -1;
            });
        },
        //获取班级
        async get_grade_list() {
            var reqData = {
                student_id: this.$store.getters.userInfo.id,
                group_type: this.groupType
            };
            //获取班级类表
            var gradeData = await getGradeList(reqData);
            console.log("====================================");
            console.log("获取班级类表:", gradeData);
            console.log("====================================");
            if (gradeData.data.length === 0) {
                this.$message({
                    message: "您还没有加入班级",
                    type: "warning"
                });
                return;
            } else {
                this.gradeDataList = gradeData.data;
                this.selectGradeIndex = 0;
                this.changeGrade();
            }
        },
        //获取班级公告
        async getNotice() {
            var query = {
                groupid: this.gradeDataList[this.selectGradeIndex].groupid
            };
            var data = await getNoticeLists(query);
            if (data.code == 200) {
                this.classNoticeLists = data.data.data;
            } else {
                this.classNoticeLists = [];
            }
            console.log("获取班级公告", data);
        },
        //查看公告
        async seeGongGao(el) {
            console.log("查看公告", el);
            var query = {
                groupid: el.groupid,
                notice_id: el.groupid
            };
            var data = await saveBrowseNum(query);
            console.log("查看公告：", data);
            this.gongGaoDialog = el;
            this.gongGaoDialogVisible = true;
        },
        changeGrade() {
            this.getNotice();
            this.$emit(
                "changeGrade",
                this.gradeDataList[this.selectGradeIndex]
            );
        },
        async showDetails() {
            this.classMess = {
                group_name: this.gradeDataList[this.selectGradeIndex]
                    .group_name,
                nicheng: {
                    name: this.gradeDataList[this.selectGradeIndex].nicheng,
                    avatar: ""
                },
                count_num: this.gradeDataList[this.selectGradeIndex].count_num,
                creat_time: getFormatTime(
                    this.gradeDataList[this.selectGradeIndex].creat_time
                ),
                group_brief:
                    this.gradeDataList[this.selectGradeIndex].group_brief ||
                    "暂无简介"
            };
            // 获取老师
            var teacherData = await getGradeMemberList({
                groupid: this.gradeDataList[this.selectGradeIndex].groupid,
                users_type: 2
            });
            //获取学生
            var studentData = await getGradeMemberList({
                groupid: this.gradeDataList[this.selectGradeIndex].groupid,
                users_type: 1
            });
            this.teacherList = this.forList(teacherData.data);
            this.studentList = this.forList(studentData.data);
            this.userTableList = this.teacherList;
            console.log(this.userTableList);
            this.dialogVisible = true;
        },
        forList(arrData) {
            //班主任
            var founder_user_id = this.gradeDataList[this.selectGradeIndex]
                .founder_user_id;
            if (arrData.length != 0) {
                for (let i = 0; i < arrData.length; i++) {
                    let date = getFormatTime(arrData[i].update_time);
                    arrData[i].update_time = date;
                    if (founder_user_id == arrData[i].user_id) {
                        arrData[i].master = 1;
                    }
                    if (arrData[i].teach_subject_name == null) {
                        arrData[i].teach_subject_name = "**";
                    }
                    if (arrData[i].avatar == "") {
                        arrData[
                            i
                        ].avatar = require("@/assets/images/icon/logo.png");
                    }
                    if (arrData[i].user_id == founder_user_id) {
                        arrData[i].master = 1;
                        this.classMess.nicheng.avatar = arrData[i].avatar;
                    }
                }
            } else {
                arrData = [];
            }
            return arrData;
        },
        //退出班级
        outGrade() {
            this.$confirm("你真的要退出吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    toGradeOut({
                        groupid: this.gradeDataList[this.selectGradeIndex]
                            .groupid
                    }).then(res => {
                        console.log(res);
                        if (res.code !== 200) {
                            return;
                        }
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "退出成功!"
                        });
                        setTimeout(function() {
                            this.get_grade_list();
                            this.dialogVisible = false;
                        }, 2000);
                    });
                })
                .catch(() => {});
        },
        HTMLDecode(text) {
            var html;
            if (text) {
                html = text.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
            }
            return html;
        }
    }
};
</script>

<style scoped lang="scss">
.classMess {
    height: 403px;
    width: calc(100% - 429px);
    border-radius: 8px;
    background: #ffffff;
}

.newsSectionTitle {
    height: 73px;
    background: #ebeff5;
    border-radius: 8px 8px 0px 0px;
    padding: 0 27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .classNameText {
        font-size: 22px;
        font-weight: 600;
        color: #2d3440;
        text-decoration: underline;
        cursor: pointer;
    }
    .classSelectBox {
        width: 200px;
        display: flex;
        justify-content: space-between;
    }
}

.classMessBox {
    padding: 15px 25px;
    width: 100%;
    box-sizing: border-box;

    .MessTimeLine {
        height: 299px;
        background: #eceff7;
        border-radius: 8px;
        overflow: hidden;

        .MessTimeLineTitle {
            width: 100%;
            height: 46px;
            line-height: 46px;
            font-size: 16px;
            font-weight: 500;
            color: #2c323f;
            padding-left: 62px;
            box-sizing: border-box;
            border-bottom: 1px solid #dadfe6;
        }
        .messPadBox {
            width: 100%;
            height: 250px;
            padding: 10px 20px 10px 0;
            box-sizing: border-box;

            .lineContent {
                width: 100%;
                height: 230px;
                overflow: auto;
                padding: 20px;
                box-sizing: border-box;

                &::-webkit-scrollbar-track-piece {
                    background-color: #ffffff;
                }
                &::-webkit-scrollbar {
                    width: 6px;
                    height: 6px;
                }
                &::-webkit-scrollbar-thumb {
                    background-color: #9fa3b0;
                    background-clip: padding-box;
                    min-height: 28px;
                    border-radius: 5px;
                }
                &::-webkit-scrollbar-thumb:hover {
                    background-color: #bbb;
                }
                .cardTitle {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 20px;
                    color: #2c323f;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    &:hover {
                        opacity: 0.8;
                    }
                }
                .cardSubTitle {
                    height: 22px;
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 20px;
                    color: #9ea4b0;
                }

                .noMoreNotice {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    color: #9ea4b0;
                }
            }
        }
    }
}

.dialogBox {
    border-radius: 8px;
}

.dialogTitle {
    width: 140px;
    margin: 0 auto;
    font-size: 14px;
    display: flex;
    text-align: center;

    .dialogTitleItem {
        width: 60px;
        position: relative;
        cursor: pointer;
    }
}

.itemIsSelect {
    color: #018854;

    &::after {
        content: "";
        height: 2px;
        width: 60px;
        background: #018854;
        position: absolute;
        bottom: -10px;
        left: 0;
    }
}

.dialogBody {
    width: 100%;
    padding: 40px 30px;
    box-sizing: border-box;

    .classInfo {
        display: flex;
        align-items: center;

        img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }

        .classInfoTitle {
            margin-left: 10px;

            .classInfoTitleClassName {
                font-size: 18px;
                color: #2d3440;
                font-weight: 600;
            }

            .classInfoTitleClassTime {
                font-size: 14px;
                color: #9ea4b0;
            }
        }
    }

    .classIntroduction {
        font-size: 16px;
        line-height: 30px;

        .classIntroductionTitle {
            font-weight: 600;
            font-size: 16px;
            color: #2d3440;
        }
    }

    .classPeoNum {
        font-size: 16px;
        color: #2d3440;
        font-weight: 600;
        margin-top: 20px;
    }

    .classPeoAvatarBox {
        display: flex;
        flex-wrap: wrap;

        .classPeoAvatarItem {
            width: 60px;
            display: flex;
            justify-content: center;
            margin: 20px 5px 10px 5px;

            .classPeoAvatarItemName {
                text-align: center;
            }
        }
    }
    .color {
        color: #00d5a2;
        font-weight: bold;
        font-size: 16px;
        margin-left: 4px;
    }
}

.gongGaotitle {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.gongGaoSub {
    margin-top: 8px;
}

.gongGaoSub2 {
    display: flex;
    flex-direction: row-reverse;
}
</style>
